<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框验证</title>
    <style>
        body {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1 align="center">个人简历</h1>
    <form id="resumeForm" method="post">
        <table align="center" border="1" width="600px" background="./35a9b55cfcb6b79f643679f8d12df8276828ff0a7a045-FYwJsd_fw658.webp">
            <tr height="70px">
                <td align="center" width="100px">姓名：</td>
                <td><input type="text" placeholder="必填项"></td>
                <td rowspan="2" width="100px">
                    <input type="file" id="photoInput" accept="image/*">
                    <br>
                    <img id="photoPreview" src="./js.jpeg" alt="照片预览" style="max-width: 100px; max-height: 150px; display: block; margin: 10px auto;">
                </td>
            </tr>
            <tr height="70px">
                <td align="center">性别：</td>
                <td><input type="radio" checked="checked">女<input type="radio">男</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td colspan="2"><input type="number" id="ageInput" min="0"></td>
            </tr>
            <tr>
                <td align="center">新增技能点</td>
                <td colspan="2">
                    <textarea id="skillsDescription" rows="10" cols="50" placeholder="请输入技能描述..."></textarea><br>
                </td>
            </tr>
            <tr align="center" height="70px">
                <td colspan="3"><input type="submit" id="submitButton" title="提交">
                    <input type="reset" id="resetButton" title="重置">
                    <div class="anniu">
                        <button id="printButton">打印保存</button>
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <script>
        let autoResetTimer;
        let lastActivityTime = Date.now();

        const resetFormIfInactive = () => {
            autoResetTimer = setTimeout(() => {
                if ((Date.now() - lastActivityTime) >= 30000) {
                    document.getElementById('resetButton').click();
                }
            }, 30000);
        };

        const resetTimer = () => {
            clearTimeout(autoResetTimer);
            lastActivityTime = Date.now();
            resetFormIfInactive();
        };

        // 为所有输入元素添加事件监听器
        const inputs = document.querySelectorAll('#resumeForm input, #resumeForm textarea, #resumeForm select');
        inputs.forEach(input => {
            input.addEventListener('input', resetTimer);
            input.addEventListener('change', resetTimer);
        });

        document.getElementById('photoInput').addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    document.getElementById('photoPreview').src = e.target.result;
                };
                reader.readAsDataURL(file);
                resetTimer();
            }
        });

        // 提交按钮点击事件
        document.getElementById('submitButton').addEventListener('click', function(event) {
            event.preventDefault();
            const age = parseInt(document.getElementById('ageInput').value, 10);

            if (isNaN(age) || age < 0) {
                alert('请输入有效的年龄');
                return;
            }

            let ageMessage = '';
            if (age < 18) {
                ageMessage = '18岁以下是未成年，不能提交';
                alert(ageMessage);
                return;
            } else if (age >= 18 && age <= 25) {
                ageMessage = '18-25岁是青少年';
            } else if (age >= 26 && age <= 30) {
                ageMessage = '25-30岁是青年';
            } else if (age >= 31 && age <= 50) {
                ageMessage = '30-50岁是中年';
            } else {
                ageMessage = '50岁以上是中老年';
            }

            alert('可以报考提示\n' + ageMessage);

            // 提交表单
            document.getElementById('resumeForm').submit();
        });

        // 重置按钮点击事件
        document.getElementById('resetButton').addEventListener('click', function() {
            document.getElementById('ageInput').value = '';
            document.getElementById('photoInput').value = '';
            document.getElementById('photoPreview').src = '';
            document.getElementById('skillsDescription').value = ''; // 清空textarea
            resetTimer(); // Reset timer after reset to avoid immediate auto-reset
        });

        document.getElementById('printButton').addEventListener('click', function() {
            window.print();
        });

        // 页面加载时初始化自动重置计时器
        window.addEventListener('load', resetFormIfInactive);
        resetTimer(); // Initial call to start the timer

        // 页面加载时弹出欢迎信息
        alert("从12.23.html中跳转");
    </script>
</body>
</html>